<script setup lang="ts">
  import { ref,onMounted } from 'vue'
  import axios from 'axios';
  import A from '../a.js?worker'
  //@ts-ignore
  const virtuaListDOM = ref<InstanceType<typeof VituaList> | null>(null)
  const isLoading=ref(true)
  const studentsList=ref([])
  const getStudentsList=async ()=>{
    try{
      const res=await axios.get('http://localhost:3000/students');
      studentsList.value=res.data.data
      isLoading.value=false
      // 新增：数据加载完成后，给根元素添加标记（供 Puppeteer 检测）
      document.documentElement.setAttribute('data-loaded', 'true');
    }catch(err){
      console.error('获取学生数据失败:', err);
      isLoading.value=false
      document.documentElement.setAttribute('data-loaded', 'false');// 新增：数据加载失败后，给根元素添加标记（供 Puppeteer 检测）
    }
    

  }
  // const downloadScreenshot = async () => {
  //   try {
  //     // 调用后端截图接口
  //     const response = await axios.get('http://localhost:3000/screenshot/students',{responseType: 'blob'});
  //     // 创建临时 URL 并触发下载
  //     const url = URL.createObjectURL(new Blob([response.data], { type: 'image/png' }));
  //     const a = document.createElement('a');
  //     a.href = url;
  //     a.download = '学生列表截图.png'; // 下载文件名
  //     a.click();
  //     URL.revokeObjectURL(url); // 释放内存
  //   } catch (err) {
  //     console.error('下载截图失败:', err);
  //     alert('下载截图失败，请重试！');
  //   }
  // }
  //@ts-ignore
  const aWorker= A()
  const downloadScreenshot = async () => {
    aWorker.postMessage(JSON.stringify(studentsList.value))//postMessage 发送数据给worker,只能发送字符串，不能发送对象，所以需要将对象转成字符串
  }
  aWorker.onmessage= function(datas:any){
    const url=datas.data
    const a = document.createElement('a');
    a.href = url;
    a.download = '学生列表截图.png'; // 下载文件名
    a.click();// 触发下载
    
  }
  onMounted(()=>{
    getStudentsList()
  })
  
</script>
<template>
  <div>
    <button v-myThrottle="{delay: 1000, handler: downloadScreenshot}">导出图片</button>
    <div style="height: 450px;border: 1px solid red;">
      <div v-if="isLoading">数据加载中...</div>
      <VituaList :list="studentsList" ref="virtuaListDOM" v-else></VituaList>
    </div>
  </div>
</template>



<style scoped>

</style>